<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="./css/register.css">
		<style>
			body{
				background: url('https://api.xygeng.cn/bing/1920.php') no-repeat;
				background: cover);
			}
		</style>
	</head>
	<body style="width: 100%;">
		<div class="thismain">
			<h1 style="padding-top: 10px;">注册</h1>
			<h4>&nbsp;&nbsp;&nbsp;&nbsp;register</h4>
			<hr style="background: black;">
			<!-- 表单 -->
			<form class="mui-input-group" style="background: none;">
			    <div class="mui-input-row">
			        <label>用户名*</label>
			    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
			    </div>
			    <div class="mui-input-row">
			        <label>密码*</label>
			        <input type="password" class="mui-input-password" placeholder="请输入密码">
			    </div>
				<div class="mui-input-row">
				    <label>姓名*</label>
				<input type="text" class="mui-input-clear" placeholder="请输入真实姓名">
				</div>
				<div class="mui-input-row">
				    <label>QQ*</label>
				<input type="text" class="mui-input-clear" placeholder="请输入QQ号(用作头像)">
				</div>
				<div class="mui-input-row">
				    <label>手机</label>
				<input type="text" class="mui-input-clear" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
				    <label>邮箱</label>
				<input type="text" class="mui-input-clear" placeholder="请输入邮箱">
				</div>
			    <div class="mui-button-row">
			        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
			        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
			    </div>
			</form>			
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script>
			var fom = document.getElementsByTagName('input');
			var wor;
			mui.alert('带*号为必填项！','提示','明白',function () {
			},'div')
			// var know = false;
			// for(var i = 0;i <= fom.length - 1;i ++){
			// 	fom[i].onclick = function(){
			// 		if(!know){
			// 		}
			// 	}
			// }
			var btn = document.getElementsByTagName('button');
			var lab = document.getElementsByTagName('label');

			// 表单验证
			btn[0].onclick = function(){
				for(var i = 0;i <= fom.length - 3;i ++){
					lab[i].style.color = 'black';
					fom[i].style.borderBottom = 'none';
				}
				// 还原
				for(var i = 0;i <= fom.length - 3;i ++){
					if(fom[i].value == ""){
						lab[i].style.color = 'red';
						fom[i].style.borderBottom = '2px solid #347ef1';
						wor = true;
					// return 0;
					}
				}
				if(wor){
					mui.alert('有必填项未填！','警告','明白',function (e) {
						wor = false;
					},'div')
				}
			}
		</script>
	</body>

</html>
